<template>
	<div>
		<template v-if="isTauri">
			<div class="window-control-wrapper" v-if="isTauri">
				<WindowControl />
			</div>
		</template>
		<div class="router-view-wrapper" :style="{
			height: isTauri ? '' : 'calc(100vh - 2px)'
		}">
			<router-view />

			<div class="link">
				<router-link to="/home">Home</router-link>
				<router-link to="/testPinia">TestPinia</router-link>
				<router-link to="/count">Count</router-link>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const isTauri = import.meta.env.VITE_IS_TAURI;

document.addEventListener("contextmenu", e => {
	if (["production", "tauri"].includes(import.meta.env.MODE)) {
		e.preventDefault();
	}
});

</script>

<style lang="scss">
@import "/iconfont/iconfont.css";

.window-control-wrapper {
	height: 30px;
}

.router-view-wrapper {
	overflow-x: hidden;
	overflow-y: auto;
	height: calc(100vh - 32px);
	border: 1px solid #bfbfbf;
}

.link {
	padding: 10px;
	a {
		margin-right: 10px;
	}
}
</style>
